import { getImageUrl } from '@/shared/lib/images';
import Image from 'next/image';

import cs from './SmallCourseCard.module.scss';

export const SmallCourseCard = ({
  image,
  title,
  price,
  discountPrice,
}: {
  image: string;
  title: string;
  price: number;
  discountPrice?: number;
}) => (
  <div className={cs.card}>
    <div className={cs.image}>
      {image && (
        <Image
          alt={title}
          fill
          priority
          sizes="(max-width: 768px) 25vw, (max-width: 1024px) 25vw, (max-width: 1366px) 15vw, 15vw"
          src={getImageUrl(image)}
        />
      )}
    </div>
    <div className={cs.info}>
      <p className={cs.title}>{title}</p>
      <p className={cs.price}>
        {(discountPrice !== null ? discountPrice : price)?.toLocaleString()} ₽
        {discountPrice !== null && <span className={cs.discount_price}>{price.toLocaleString()} ₽</span>}
      </p>
    </div>
  </div>
);
